<script setup>
import { ref } from 'vue'
const awesome = ref(true)

const count = ref(0)

const parentMessage = ref('numero')
// const items = ref([
//   { message: 'One' },
//   { message: 'Two' },
//   { message: 'Three' },
//   { message: 'Four' },
//   { message: 'Five' },
//   { message: 'Six' },
//   { message: 'Seven' },cd /path/to/your-project
//   { message: 'Eight' },
//   { message: 'Nine' },
//   { message: 'Ten' }])

const items = ref([1,2,3,4,5,6,7,8,9,10])

const msg = ref('Hello Vue 3 + Vite + Heyi!')
</script>

<template>
  <button @click="awesome = !awesome">切换内容</button>
	<h1 v-if="awesome">第一个内容</h1>
	<h1 v-else>第二个内容</h1>

  <button @click="count = count+100">You clicked me {{ count }} times.</button>
  <h1 v-if="count = count > 100 && count < 200 ? 0 : count">第一个内容</h1>
	<h1 v-else-if="count > 80">第二个内容</h1>
  <h1 v-else-if="count > 60">个内容</h1>
  <h1 v-else>内容</h1>

  <li v-for="(item, index) in items">
  	{{ parentMessage }} - {{ index }} - {{ item }}
	</li>

  
  <span>Message: {{ msg }}</span>

  <div :id="cue"></div>
</template>
